<template>
  <div style=" margin: 20px;">
    <el-form ref="tableForm" :inline="true" :model="tableForm" class="demo-demandForm" label-width="100px">
      <el-form-item label="工单号" prop="workOrder">
        <el-input v-model.trim="tableForm.workOrder"/>
      </el-form-item>
      <el-form-item label="需求标题" prop="demandTitle">
        <task-group-id-select v-model="tableForm['demandTitle']"></task-group-id-select>
        <!-- <el-input v-model.trim="tableForm.demandTitle"></el-input> -->
      </el-form-item>
      <el-form-item label="任务类型" prop="demandType">
        <demand-select v-model="tableForm['demandType']"></demand-select>
      </el-form-item>
      <el-form-item label="对端需求人员" prop="sideDemandPerson">
        <el-input v-model.trim="tableForm.sideDemandPerson"/>
      </el-form-item>
      <el-form-item label="使用方接口人" prop="useDataPerson">
        <el-input v-model.trim="tableForm.useDataPerson"/>
      </el-form-item>
      <el-form-item label="数据归属部门" prop="dataBelongDepart">
        <el-input v-model.trim="tableForm.dataBelongDepart"/>
      </el-form-item>
      <el-form-item label="需求人" prop="demandPerson">
        <user-select v-model="tableForm['demandPerson']"/>
        <!-- <el-input v-model.trim="tableForm.demandPerson" /> -->
      </el-form-item>
      <el-form-item label="业务运营人员" prop="motionPerson">
        <!-- <el-input v-model.trim="tableForm.motionPerson" /> -->
        <user-select v-model="tableForm['motionPerson']"/>
      </el-form-item>
      <el-form-item label="数据加工人员" prop="doDataPerson">
        <el-input v-model.trim="tableForm.doDataPerson"/>
      </el-form-item>
      <el-form-item label="数据推送人员" prop="pushDataPerson">
        <!-- <el-input v-model.trim="tableForm.pushDataPerson" /> -->
        <user-select v-model="tableForm['pushDataPerson']"/>
      </el-form-item>
      <el-form-item label="沟通群类型" prop="groupType">
        <el-select v-model="tableForm.groupType">
          <el-option v-for="o in groupType" :key="o.key" :label="o.label" :value="o.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="运营沟通群" prop="motionWechat">
        <el-input v-model.trim="tableForm.motionWechat"/>
      </el-form-item>
      <el-form-item label="发送状态" prop="status">
        <el-select v-model="tableForm.status">
          <el-option v-for="o in status" :key="o.key" :label="o.value" :value="o.key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
                        style="margin-right: 10px;width: 100%;"/>
      </el-form-item>
      <el-form-item style="margin-left: 100px">
        <el-button type="primary" @click="page()"> 查询</el-button>
        <el-button @click="resetPageRequestBody()"> 重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="openDialog(null)">
      添加
    </el-button>
    <el-table :data="tableList" border>
      <el-table-column label="ID" prop="id" width="60"/>
      <el-table-column label="工单号" prop="workOrder" width="100"/>
      <el-table-column label="需求标题" prop="demandTitle" width="250"/>
      <el-table-column prop="demandType" label="任务类型" width="150"/>
      <el-table-column prop="groupType" label="沟通群类型" width="100"/>
      <el-table-column prop="motionWechat" label="运营沟通群" width="250"/>
      <el-table-column prop="sideDemandPerson" label="对端需求人员" width="150"/>
      <el-table-column prop="useDataPerson" label="数据使用方接口人" width="150"/>
      <el-table-column prop="dataBelongDepart" label="数据归属部门和产品" width="250"/>
      <el-table-column prop="demandPerson" label="需求人" width="150"/>
      <el-table-column prop="motionPerson" label="运营接口人" width="150"/>
      <el-table-column prop="doDataPerson" label="数据加工人" width="150"/>
      <el-table-column prop="pushDataPerson" label="数据推送/接收人" width="150"/>
      <el-table-column prop="requireStatus" label="状态" width="50"/>
      <el-table-column prop="demandDesc" label="需求描述" width="250"/>
      <el-table-column label="发送状态" prop="status" min-width="160">
        <template v-slot="scope">
          {{
            scope.row.status === 0 ? '待发送' : (scope.row.status === 1 ? '发送成功' : (scope.row.status === 2 ? '重试中' :
                (scope.row.status === 3 ? '失败,不再重试' : (scope.row.status === 4 ? '异常' : ''))))
          }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150" prop="createTime">
        <template v-slot="scope">
          {{ scope.row.createTime|transformDateFormat }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="openDetailDialog(scope.row.id)">详情</el-button>
          <el-button size="mini" type="text" @click="openDialog(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="text" @click="_delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :current-page="tableForm.current" :total="tableForm.total" :page-size="tableForm.size"
                   :page-sizes="tableForm.sizes"
                   :style="tableForm.style" :layout="tableForm.layout"
                   @current-change="page" @size-change="changeSize"/>

    <upsert-dialog :id="currentRowId" :dialog-visible="dialogVisible" @closeDialog="closeDialog()"/>
    <detail-dialog :id="currentRowId" :dialog-visible="dialogDetailVisible" @closeDialog="closeDetailDialog()"/>
  </div>
</template>
<script>

// （1）分页，组件封装统一格式
// （2）下拉，单、多选、手动输入
// （3）搜索，联想搜索、一键清空
// （4）校验，IP、两头去空、提示
import {createPageRequestBody} from "@/api/system/pagination";
import {deleteRequire, pageRequire} from "@/api/dx/dx";
import UpsertDialog from "@/views/dx/demand/upsertDialog";
import DetailDialog from "@/views/dx/demand/detailDialog";
import BdpPagination from "@/views/common/bdpPagination";
import TaskGroupIdSelect from "@/views/dx/taskGroupIdSelect";
import UserSelect from "@/views/dx/userSelect";
import DemandSelect from "@/views/dx/demandSelect";

export default {
  name: "Demand",
  components: {BdpPagination, UpsertDialog, DetailDialog, TaskGroupIdSelect, UserSelect, DemandSelect},
  data() {
    return {
      // tableForm: {},
      tableList: [],
      tableForm: createPageRequestBody(),
      createTimes: [],
      currentRowId: null,
      dialogVisible: false,
      dialogDetailVisible: false,
      groupType: [{key: 1, value: "微信", label: "微信"}, {key: 2, value: "企微", label: "企微"}, {
        key: 3,
        value: "钉钉",
        label: "钉钉"
      }],
      status: [{ key: 0, value: "待发送" }, { key: 1, value: "成功发送" }, { key: 2, value: "重试中" }, { key: 3, value: "失败,不再重试" }, { key: 4, value: "异常" }],
    }
  },

  mounted() {
    this.page()
  },

  methods: {
    resetPageRequestBody() {
      // this.tableForm = {}
      this.tableForm = createPageRequestBody()
      this.createTimes = []
      this.page()
    },

    page(current = 1) {
      if (this.createTimes && this.createTimes.length == 2) {
        this.tableForm.createTimeBegin = this.createTimes[0];
        this.tableForm.createTimeEnd = this.createTimes[1];
      }
      this.tableForm.current = current
      pageRequire(this.tableForm, this.tableForm.current, this.tableForm.size).then(res => {
        this.tableList = res.data.records
        this.tableForm.total = res.data.total
      })
    },
    changeSize(size) {
      this.tableForm.size = size
      this.page(1)
    },

    openDialog(id) {
      this.currentRowId = id
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.page()
    },
    openDetailDialog(id) {
      this.dialogDetailVisible = true;
      this.currentRowId = id
    },
    closeDetailDialog() {
      this.dialogDetailVisible = false
      this.page()
    },

    _delete(id) {
      this.$confirm('确定删除？', '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
        deleteRequire(id).then(() => {
          this.$message({type: 'success', message: '删除成功'})
          this.page()
        })
      }).catch(() => {
        this.$message({type: 'info', message: '删除取消'})
      })
    },
  }
}
</script>

<style scoped>

</style>
